<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<meta charset="utf-8">
		<title>实名认证</title>	
		<meta name="viewport" content="width=device-width, initial-scale=1.0">	
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js" ></script>

		<style>
			body{
				font-family: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial, san-serif;
			}
			*{
				margin: 0;
				padding: 0;
			}
			@font-face {
			  font-family: 'iconfont';  /* project id 292950 */
			  src: url('//at.alicdn.com/t/font_1m2ugtmfk187u8fr.eot');
			  src: url('//at.alicdn.com/t/font_1m2ugtmfk187u8fr.eot?#iefix') format('embedded-opentype'),
			  url('//at.alicdn.com/t/font_1m2ugtmfk187u8fr.woff') format('woff'),
			  url('//at.alicdn.com/t/font_1m2ugtmfk187u8fr.ttf') format('truetype'),
			  url('//at.alicdn.com/t/font_1m2ugtmfk187u8fr.svg#iconfont') format('svg');
			}
			.iconfont {
				font-family: "iconfont";
				font-size: 25px;
				font-style: normal;
			}			
			header {
				height: 50px;
				background-color: #4497DE;
				width: 100%;
				text-align: center;
				color: white;
				font-size:18px;
                line-height:50px;
			}
			 input:focus {
				outline: none;
				color: #000000;								
			}
										
			.login {
				margin-top: 30px;
				width: 90%;
				margin-left: 5%;
				margin-right: 5%;
			}
			.zhuyishixiang {
				margin-top: 10px;
				width: 90%;
				margin-left: 5%;
				margin-right: 5%;
				    color: red;
    			font-weight: 800;
			}
			
			.login .input {
				background: #FFF;
				border-bottom: 1px solid #ddd;
				margin-bottom: 20px;
				overflow: hidden;
				height: 35px;
			}
			
			 i {
				color: #999;
				font-size: 14px;
				padding-left: 3px;
				padding-right: 4px;
			}
			
			.input_text_user {
				height: 30px;
				border: none;
				text-align: left;
				color: #999;
				width: 200px;
				font-size: 14px;
			}
				.input_text_shen {
				height: 30px;
				border: none;
				text-align: left;
				color: #999;
				width: 185px;
				font-size: 14px;
			}
			 .denglu_but {
				height: 40px;
				line-height: 40px;
				width: 40%;
				display: block;
				font-size: 18px;
				background: #4497DE;
				color: #fff;
				border-radius: 0.25rem;
				text-align: center;		
				margin:20px 10px;
				border: none;
				-webkit-box-flex: 1;
			    -webkit-flex: 1;
			    flex: 1;
			}
			
			.zhuce_but {
				height: 40px;
				line-height: 40px;
				width: 40%;
				display: block;
				font-size: 18px;
				background-color: #D8D8D8;
				color: #000000;
				border: none;
				border-radius: 5px;
				text-align: center;		
				margin:20px 10px;
				-webkit-box-flex: 1;
			    -webkit-flex: 1;
			    flex: 1;
			}	
			
			::-moz-placeholder { color: #191818; }
				::-webkit-input-placeholder { color:#191818; }
				:-ms-input-placeholder { color:#191818; }
		</style>		
	</head>
	<body style="">		
		<header  >
			身份认证
		</header>		
		<!--头部展示-->
		<div class="login">		
			<div class="input">
				<i class="iconfont">&#xe634;</i>
				<input name="name" type="text" class="input_text_user ClearInput " placeholder="请输入您的姓名"  style="font-size:16px">					
			</div>
			<div class="input">
				<i class="iconfont">&#xe74b;</i>
				<input name="idNumber" type="number" class="input_text_shen ClearInput " placeholder="请输入您的身份证号" style="font-size:16px">					
			</div>					
		</div>
		
		<div style="display: -webkit-box;display: -webkit-flex;display: flex;">
			<button  class="denglu_but" onclick="submit()">确认</button>	
	    	<button class="zhuce_but" onclick="cancel()">取消</button>
		</div>	
		<div class="zhuyishixiang">
			<div class="zhuyishixiang">
    		<span style="font-size: 22px;">注:</span>请务必填写真实信息，本平台与公安部信息中心联网认证，仅以此为您的唯一标识！
		</div>
		<script>
			window.alert = function(name){
			  var iframe = document.createElement("IFRAME");
			  iframe.style.display="none";
			  iframe.setAttribute("src", 'data:text/plain,');
			  document.documentElement.appendChild(iframe);
			  window.frames[0].window.alert(name);
			  iframe.parentNode.removeChild(iframe);
			 };
			 
			 window.confirm = function (message) {
			   var iframe = document.createElement("IFRAME");
			   iframe.style.display = "none";
			   iframe.setAttribute("src", 'data:text/plain,');
			   document.documentElement.appendChild(iframe);
			   var alertFrame = window.frames[0];
			   var result = alertFrame.window.confirm(message);
			   iframe.parentNode.removeChild(iframe);
			   return result;
			 };
		
			var tag=0;
			function submit(){
				
			   if(tag==1){
					return false;
				}
				
				var name=$('input[name=name]').val();
				var idNumber=$('input[name=idNumber]').val();
				
				if(name==''){
					alert('请输入真实姓名');
					return false;
				}
				if(idNumber==''){
					alert('请输入有效身份证号');
					return false;
				}
				
				code=idNumber;
				if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
					alert("身份证号格式错误");
					return false;
				}
				
				
				tag=1;
				 $.post("${ctxFront }/jiu/ajaxCertification",{name:name,uid:"${uid}",idNumber:idNumber},
	                function(data){
					 console.log(data);
	                    var jsonObj =JSON.parse(data);
	                	alert(jsonObj.message); 
	                	
	                	if(jsonObj.msg=='success'){
	                		window.location.href = "${ctxFront }/jiu/chongzhi?uid=${uid}";
	                	}else{
	                		tag=0;
	                	}
	                	
	             });
			}
			
			function cancel(){
				window.location.href = "${ctxFront }/jiu/index";
			}
			
			
			
		</script>				
	</body>
</html>